// webpack配置文件，执行'webpack'命令自动根据改该文件配置执行
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'build.[name].js',
		path: resolve(__dirname, 'dist')
	},
	//loader配置, .1下载-2.使用
	module: {
		rules: [
			{
				// 处理样式文件的loader（需要同时安装less）
				test: /\.(sa|sc|c|le)ss$/,
				// less-loader 将less文件编译成css文件
				// css-loader 将css整合到js
				// style-loader 创建style标签并注入编译后的css
				use: ['style-loader', 'css-loader', 'less-loader'],
			},
			{
				// 处理图片资源,url-loader依赖file-loader
				test: /\.(png|gif|jpg|jpeg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							// 图片小于8kb被处理成base64字符串，输出资源中不再有该图片
							// 优点：减少请求数量（减少服务器压力）
							// 缺点：图片体积会更大（文件请求速度更慢）
							limit: 8 * 1024,
							// 获取hash前10位保留原有扩展名
							name: '[name].[hash:10].[ext]',
							// 关闭ES6模块化，解决html文件中引入的图片导致打包失败的问题，webpack5默认开启esModule，url-loader默认使用ES6模块，html-loader引用时使用commonjs模块
							esModule: false,
							// 基于output.path构建的子目录
							outputPath: 'img'
						}
					}
				],
				// webpack5废弃url-loader，file-loder,若继续使用旧的api增加type: 'javascript/auto'
				type: 'javascript/auto'//阻止webpack5中asset导致图片等资源被打包两次
			},
			{
				// 处理html文件img-src的图片，负责引入资源从而能被url-loader处理
				test: /\.html$/,
				loader: 'html-loader',
			},
			{
				// 打包其他资源,除了排除的资源外其他资源使用file-loader处理
				exclude: /\.(css|js|html|jsx|ts|less|scss|json|png|jpg|svg)/,
				loader: 'file-loader',
				options: {
					name: '[hash:10].[ext]'
				}
			},
		]
	},
	// 插件,1.下载-2.引入-3.使用
	plugins: [
		// 创建空的html自动引入打包输出的所有资源
		new HtmlWebpackPlugin({
			// 复制该html作为模板
			template: './src/index.html'
		})
	],
	mode: 'development',
	// 本地开发服务器，用于自动化（自动编译、自动打开浏览器、自动刷新浏览器），只在内存中编译打包不会有输出
	// 启动指令：
	// 打包：使用本地webpack(npx webpack) 使用全局webpack(webpack)
	// 编译构建（webpack5已废弃改为webpack server）：使用本地webpack(npx webpack-dev-server) 使用全局webpack(webpack-dev-server)
	devServer: {
		// 编译后的路径
		contentBase: resolve(__dirname, 'build'),
		// 启用gzip压缩
		compress: true,
		port: 3000,
		open: true,
	}
}